components的使用方法：
1.引用元件進入頁面
2.設置子路由並將元件進入頁面

引用元件

我們拿他的 HelloWorld.vue檔做示範

並且在你想要引入的頁面中引用 拿app.vue示範

//app.vue

import HelloWorld from "../components/HelloWorld.vue";

export default {
    name: 'App',
    components: {
    HelloWorld
    },
    data: () => ({
        //
    })

};

在上方 template中 使用<HelloWorld />

子路由引入

一樣我們用 HelloWorld.vue檔

in router/index.js

//你要先在上面import你要的元件
import HelloWorld from '../components/HelloWorld.vue'

//在下方Vue.use(VueRouter)尋找使用頁面

{
    path: '/app',
    name: 'app',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/HelloWorld.vue'),
    children:[{
        path:"HelloWorld",
        component:HelloWorld
},

在上方app.vue template中 使用<router-view />

這時候你的網址 http://localhost:8080/app/HelloWorld 就會是頁面加上元件了！！